<template>
	<view class="main">
		<!-- #ifdef MP-WEIXIN -->
			<navbar :bgColor="bgColor" :btnColors='btnColor' title="优惠券" :isGoBack="true" :isNotice="true" :visible="true"></navbar>
		<!-- #endif -->	
		<view class="node-tab">
			<view class="tab-item"  :class="[currentTab == 3 ? 'active' : '']" :data-current="3" @click="changeNav">全部</view>
		    <view class="tab-item"  :class="[currentTab == 0 ? 'active' : '']" :data-current="0" @click="changeNav">待使用</view>
		    <view class="tab-item"  :class="[currentTab == 1 ? 'active' : '']" :data-current="1" @click="changeNav">已使用</view>
			<view class="tab-item"  :class="[currentTab == 2 ? 'active' : '']" :data-current="2" @click="changeNav">已过期</view>
		</view>		
		<view style="display: flex;width: 100%;height: 600rpx" class="flex justify-center align-center text-center" v-if="allTabList.length == 0">
			<u-empty  mode="coupon"> </u-empty>
		</view>
		<swiper class="tab-content"  duration="300" bindchange="changeTab" :style="{'height':winHeight+'px'}">
		    <!-- 全部 -->
			<swiper-item>
				<scroll-view :scroll-y="true" class="new-list-box" @scrolltolower="allLoadMore" scroll-top="scrollTop" scroll-with-animation :refresher-enabled="true" refresher-threshold="80" refresher-default-style="white" refresher-background="white" :refresher-triggered="triggered" @refresherrefresh="onAllRefresh">
					<block v-if="allTabList.length > 0">
						<view class="new-list-item" v-for="(item,index) in allTabList" :key="index">                        
							<view  class="flex-direction coupon_left"  :class="[item.use_status == 0 ? 'coupon_top' : 'coupon_top_active']">  
								<view class="flex align-center">
									<view class="coupon_amount">{{item.amount}}</view>
									<view class="coupon_tag">元</view>   								
								</view>
								<view class="mt-25" style="font-size: 24rpx;">{{item.coupon_info}}</view> 
								 
							</view>		
							
							<view class="flex flex-direction" style="margin-left: 50px;">
								<view class="coupon_info">
									<view class="mt-15 text-bold" :class="[item.use_status == 0 ? 'coupon_title' : 'coupon_title_active']">{{item.name}}</view>   								 	
									<view class="mt-15 " :class="[item.use_status == 0 ? 'coupon_time' : 'coupon_active']"> 有效期：{{item.start_time}} 至 {{item.end_time}}</view>  	
								</view>
								<view class="flex justify-between" style="margin-top: 20rpx;width: 110rpx;height: 44rpx;">
									<view class="flex align-center" style="width: 160rpx;position: absolute;font-size: 24rpx;color: #888888;margin-left: 12px;margin-top: 10rpx;" @click="docouponInfo(item)">
										<text>使用说明</text>
										<u-icon name="arrow-right" :color="[item.use_status == 0?'#888888':'#BBBBBB']" size="15"></u-icon>
									</view>
									<view class="" style="position: absolute;right: 20rpx;" v-if="item.use_status==0" @click="docoupon">
										<u-button class="custom-style" iconColor="#36B3E9 " color="#36B3E9;" shape="circle" text="去使用" size="small"></u-button> 
									</view>
									<view class="coupon_image" v-if="item.use_status == 1">
										<image src="https://image.workair.top/uplaod/20250619/89629b96b23a839928a61a740243c9ede230ef85.png" style="width: 128rpx;	height: 128rpx;"></image>
									</view>
									
									<view class="coupon_image"  v-if="item.use_status == 2">
										<image src="https://image.workair.top/uplaod/20250619/2e306f33aeb56c3432d0e0371a6d5552cad8f426.png" style="width: 128rpx;	height: 128rpx;"></image>
									</view>
									
														 
								</view>
							</view>
							
						</view>
					</block>                
				</scroll-view>
			</swiper-item>       
		</swiper>
	</view>
	
</template>

<script>	
	export default {
			data() {
				return {
					...getApp().globalData.config,		
					cashType:'',
					userInfo:{},
					winHeight:0,
					pageNo:1,
					allTabList:[], // 全部  
					currentTab: 3, // 当前所在滑块的 index
					scrollTop: 0, // 设置竖向滚动条位置
					 triggered: false, // 下拉是否激活
				};
			},
			
			onLoad(options){
				let that=this
				if(options.cashType){
				  this.cashType=options.cashType			  
				}
				let height = uni.getSystemInfoSync().windowHeight;
				this.winHeight = (height - 150);			
				this._requestPageList(true);
			},	
			methods:{	
				//使用优惠券详情
				docouponInfo(item){					
					this.$routers.router('/pages/pagesuser/coupon/info?parms='+JSON.stringify(item),'navigateTo') 
				},
				//使用优惠券				
				docoupon(){
					this.$routers.router('/pages/class/index','switchTab') 
				},
				changeNav(e){
					let currentIndex = e.target.dataset.current;
					if (this.currentTab == currentIndex) {      
					    return false;
					} else {
					    this.pageNo=1;
						this.currentTab= currentIndex
					}
					this.allTabList=[];
					this._requestPageList(true);
				},	
				
				// 参数
				_requestPageList(isLoadMore = false, callback) {
				  if(!isLoadMore){
					this.allTabList=[]; // 全部       
					this.pageNo= 1;
					
				  }
				  let opt = {
					pageNo :this.pageNo,				
					token:uni.getStorageSync('userInfo').token,
					login_type:'app',
					status:this.currentTab
				  }    
				  this._requestPageListCom("virtualTaskList", opt, callback);
				},
				// 列表接口
				_requestPageListCom(url, params, callback) {    
				  this.$http.coupon_list(params).then(res => {
					if (res.resCode == "9999") {
					  let oldList = [];
					  oldList = this.allTabList;       
					  const newGoodsList = res.data.lists
					  const allData = [...oldList, ...newGoodsList]
					  // console.log(allData,'allData')     
					  this.allTabList=allData
					  if(callback && typeof callback === 'function'){
						callback()
					  }
					}
				  })
				},			  
				// 上拉加载  滚动到底部/右边时触发
				allLoadMore(e){
					let _self = this;
					if (this._allLoadMore) return
					this._allLoadMore = true;
					this.pageNo= ++_self.pageNo				
					this._requestPageList(true, () => {
					  _self._allLoadMore = false;
					});
				},
				
				// 下拉刷新接口
				onAllRefresh() {
				 // 开启下拉自定义样式
					this.triggered = true;
	                this.pageNo=1;
					this._requestPageList(false, () => {
						// 当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新
						this.triggered = false;
					});    
				}	
			  },
			onShow(){	
			}
		}	
</script>

<style>
	@import "./index.css";
</style>